<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名的操作</title>
		<!-- 元素类名操作：针对css中类名，可以做添加，移除，切换和包含类名操作
		 addClass()             有参【1个参，多个参】 
		                        功能：匹配元素集合中的所有元素添加一个类名或多个类名
								 语法：addClass("类名")
								      addClass("类名1 类名2")
		removeClass()			有参【1个参，多个参】
                                功能：匹配元素集合中的所有元素移除一个类名或多个类名
		toggleClassBtn()		功能：如果元素有指定类名则移除	，没有则添加		
		hasClass()	            功能：检查匹配元素集合中是否存在指定类名，返回值bool
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			.bg{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.bd{
				border: 10px solid #ffff00;
				border-radius: 50%;
			}
		 </style>
	</head>
	<body>
		<!-- html结构：4个按钮 2个空间 -->
			<div id="targetELment"></div>
				<button id="addClassBtn">添加类名</button>
				<button id="removeClassBtn">移除类名</button>
				<button id="toggleClassBtn">切换类名</button>
				<button id="hasClassBtn">判断存在类名</button>
			
			<div id="resultArea"></div>
		<script>
			//1.类名切换：css存在可用类名
			//点击  添加类名  实现效果300*300
			$("#addClassBtn").click(function(){
				$("#targetELment").addClass("bg bd");
				$("#resultArea").html("<h4>已经切换了样式 .bg</h4>" );
			});
			//2.移除类名：实现效果  点击切换类名，实现300*300的圆
			$("#removeClassBtn").click(function(){
				$("#targetELment").removeClass("bg bd");
				$("#resultArea").html("<h4>已经切换了样式 .bg</h4>" )
			});
			//3.切换类名：实现效果  点击切换类名，实现300*300的圆边框  背景色红色
			//4.样式全部移除，实现效果：实现300*300  红色背景色
			$("#toggleClassBtn").click(function(){
				//存在bg 移除
				$("#targetELment").toggleClass("bg");
				$("#resultArea").html("<h4>已经切换了样式 .bg</h4>");
			});
			//5.检查类名是否存在:bg是否存在
			$("#hasClassBtn").click(function(){
				var hc=$("#targetELment").hasClass("bd");
				$("#resultArea").text("目标元素 bg 类名是否存在"+hc);
			});
		</script>
	</body>
</html>